<template>
  <div class="add-edit">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="120px"
             class="yuyi-ruleForm">

      <el-form-item label="所属环节" prop="checkLink">
        <el-input disabled size="small" v-model="ruleForm.checkLink"></el-input>
      </el-form-item>
      <el-form-item label="所属检查项" prop="checkItem">

        <el-cascader :disabled="cascaderDisabled"
                     @change="handleChange"
                     v-model="ruleForm.checkItem"
                     clearable
                     filterable
                     size="small"
                     style="width: 100%"
                     :options="cascaderList"
                     :props="cascaderProps"
                     :show-all-levels="false"></el-cascader>

      </el-form-item>
      <el-form-item label="编号" prop="standardIdentifier">
        <el-input size="small" disabled v-model="ruleForm.standardIdentifier"></el-input>
      </el-form-item>
      <el-form-item label="检测目的">
        <el-input size="small" v-model="ruleForm.checkPurpose"></el-input>
      </el-form-item>
      <el-form-item label="检查对象">
        <el-input size="small" v-model="ruleForm.checkObject"></el-input>
      </el-form-item>
      <el-form-item label="检查依据和方法">
        <el-input size="small" v-model="ruleForm.checkBasisMethod"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input size="small"
                  type="textarea"
                  show-word-limit
                  maxlength="200"
                  :autosize="autosize"
                  v-model="ruleForm.remark"></el-input>
      </el-form-item>

      <el-form-item label="检测层面" prop="checkScope">
        <el-radio v-model="ruleForm.checkScope"
                  v-for="(item, index) in radioList"
                  :key="index"
                  :label="item.value">{{item.label}}
        </el-radio>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-switch v-model="ruleForm.isEnable"></el-switch>
      </el-form-item>

      <el-form-item style="margin-top: 25px">
        <el-button type="primary"
                   @click="handleSubmit"
                   :loading="loading"
                   size="small">{{ type === 'add' ? '确定添加' : '确定修改'}}
        </el-button>
        <el-button :loading="loading" style="margin-left: 10px" size="small" @click="handleEmpty">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'testItemAdd',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    cascaderDisabled: {
      type: Boolean,
      default: false
    },
    cascaderList: {
      type: Array,
      default: () => ([])
    },
    type: {
      type: String,
      default: () => 'add'
    },
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      cascaderProps: {
        // checkStrictly: true,
        label: 'checkItem',
        value: 'checkItem', // 'checkCode',
        children: 'children'
      },
      radioList: [{
        label: '系统层',
        value: 1
      }, {
        label: '门类层',
        value: 2
      }, {
        label: '元数据层',
        value: 3
      }, {
        label: '人工检测',
        value: 4
      }],
      checkItem: [],
      standardIdentifier: '',
      rules: {
        checkLink: [
          { required: true, message: '请输入所属环节', trigger: 'blur' }
        ],
        checkItem: [
          { required: true, message: '请选择所属检测项', trigger: 'change' }
        ],
        standardIdentifier: [
          { required: true, message: '请输入编号', trigger: 'blur' }
        ],
        checkScope: [
          { required: true, message: '请选择检测层面', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ruleForm () {
      const obj = this.obj
      obj.standardIdentifier = this.standardIdentifier || obj.standardIdentifier
      return obj
    }
  },
  methods: {
    handleChange (val) {
      if (val && val.length > 0) {
        this.ruleForm.checkItem = val[val.length - 1]
        let code = ''
        this.cascaderList.map(items => {
          items.children.map(item => {
            if (item.checkItem === this.ruleForm.checkItem) {
              code = item.checkCode
            }
          })
        })
        this.standardIdentifier = this.ruleForm.checkLink + '-' + code
      }
    },
    handleSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('handleSubmit', this.ruleForm)
        } else {
          return false
        }
      })
    },
    handleEmpty () {
      // 清空内容
      this.checkItem = []
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .add-edit {
    padding-right: 50px;
  }
</style>
